<template>
    <TaskItem v-if="data && tasks" v-for="task in tasks" :members="data" :canSelectAssign="true" :tasks="task" :onDelete="()=>deleteTask(task)"></TaskItem>
    <div class="block"></div>
    <VanButton :onClick="addTask" block round color="var(--main-color)">添加任务</VanButton>
    <div class="block"></div>
    <VanButton :onClick="handleConfirm" block round type="success">确认</VanButton>
</template>

<script setup>
import { ref,onMounted,reactive ,watch ,watchEffect} from 'vue'
import { ElMessage, ElMessageBox, ElSpace } from 'element-plus'
import TaskItem from '../components/TaskItem.vue';
import useLoadData from '../hooks/useLoadData';
import { getMemberList } from '../api/member';
import { getProjectBypid, useUpdateTask } from '../api/project'
import { useRoute } from 'vue-router';
import Loading from '../components/Loading.vue';

const props = defineProps({task:String})


const tasks = ref([])
const route = useRoute()
const {isError,isLoading,data} = useLoadData(getMemberList(route.params.pid))
onMounted(() => {
    getProjectBypid(route.params.pid).then(({ data: { plans } }) => {
        console.log(JSON.parse(plans));
        tasks.value = JSON.parse(plans);
    })
    
})

function addTask() {
    tasks.value.push({ name: '', status: 0, assignee: [] })
}

function deleteTask(task) {
  ElMessageBox.confirm('确定要删除该任务吗？', '提示', { type: 'warning' }).then(() => {
    const index = tasks.value.indexOf(task)
    tasks.value.splice(index, 1)
    ElMessage.success('删除成功')
  })
}

function handleConfirm() {;
    useUpdateTask({
        pid:route.params.pid,
        plans:JSON.stringify(tasks.value)
    })
}
</script>
<style scoped>
.block{
    height: 20px;
}
</style>